<template>
	<div style="margin-bottom: 30px">
		<div class="box-title">{{ props.title }}</div>
		<el-space wrap>
			<el-card
				v-for="item in props.itemList"
				:key="item.id"
				class="w-384px h-136px cursor-pointer"
				shadow="hover"
				@click="to(item.id)"
			>
				<el-row class="w-100% h-88px top">
					<el-col :span="24">
						<el-row justify="space-between">
							<el-col :span="16">
								<span class="job-name">{{ item.jobName }}</span>
								<div>
									<el-tag type="info" class="mt-2">{{ item.edg }}</el-tag>
								</div>
							</el-col>
							<el-col :span="8">
								<span class="salary">{{ item.salary }}</span>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
				<el-row class="w-100% h-48px bottom">
					<el-col :span="24">
						<el-col :span="20">
							<el-row justify="space-between">
								<el-col :span="18">
									<span class="company_name">
										<img :src="item.companyImg" />
									</span>
									<span class="company_name">{{ item.companyName }}</span>
								</el-col>
								<el-col :span="6">
									<span class="city"> {{ item.address }}</span>
								</el-col>
							</el-row>
						</el-col>
					</el-col>
				</el-row>
			</el-card>
		</el-space>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps<{
	title: any
	itemList: any
}>()
/**
 * 详情页跳转
 * @param id
 */
function to(id: any) {
	router.push(`/itemInfo/${id}`)
}
</script>
<style scoped>
.box-title {
	width: 100%;
	text-align: center;
	font-size: 32px;
	font-weight: 600;
	color: #222;
	line-height: 45px;
	margin-bottom: 12px;
}

.top {
	box-sizing: border-box;
	padding: 16px 20px;
}

.bottom {
	padding: 12px 20px;
	background-color: #f8faf9;
}

.job-name {
	color: #222;
	font-size: 13px;
	font-weight: 500;
	line-height: 22px;
	transition: all 0.2s linear;
}

.salary {
	font-size: 13px;
	font-weight: 500;
	color: #fe574a;
	line-height: 22px;
}

:deep( .el-card__body ){
	padding: 0 0;
}

.company_name {
	display: inline-block;
	margin-left: 8px;
	font-size: 13px;
	height: 24px;
	line-height: 24px;
	color: #666;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
	transition: all 0.2s linear;
}

.city {
	margin-left: 2px;
	color: #61687c;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	vertical-align: middle;
}

img {
	width: 24px;
	height: 24px;
	margin-right: 0;
	vertical-align: middle;
	border: none;
}
</style>
